<template>
	<view class="order-container">
		<view class="item">
			<view class="left">兑换商品</view>
			<view class="right">{{orderDetail.productName}}</view>
		</view>
		<view class="item img">
			<view class="left">商品图片</view>
			<view class="right">
				<van-image width="38" height="38" :src="img" fit="cover" />
				<!-- <image :src="img" mode=""></image> -->
			</view>
		</view>
		<view class="item">
			<view class="left">兑换数量</view>
			<view class="right">1</view>
		</view>
		<view class="item">
			<view class="left">使用积分</view>
			<view class="right">{{orderDetail.pointPrice}}</view>
		</view>
		<view class="item">
			<view class="left">兑换时间</view>
			<view class="right">{{orderDetail.exchangeTime}}</view>
		</view>
		<view class="item">
			<view class="left">兑换流水号</view>
			<view class="right">{{orderDetail.exchangeNo}}</view>
		</view>
		<view class="item">
			<view class="left">领取状态</view>
			<view v-if="orderDetail.status == 1" class="right wrong">未领取</view>
			<view v-else class="right correct">已领取</view>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	import dayjs from 'dayjs'
	export default {
		data() {
			return {
				params: {
					projId: null,
					residentId: null,
					pagination: {
						current: 1,
						pageSize: 10
					},
					sorter: {
						field: "id",
						order: 0
					}
				},
				recordList: [],
				orderDetail: {},
				id: null,
				img: null
			}
		},
		onLoad(options) {
			this.id = options.id
			this.getRecordList()
		},
		computed: {
			...mapState(['userInfo'])
		},
		methods: {
			// 获取兑换订单详情
			getRecordList() {
				this.params.projId = uni.getStorageSync('userInfo').projId
				this.params.residentId = uni.getStorageSync('userInfo').id
				this.$http.post('/wx/points/shop/record/list',this.params).then(res => {
					console.log(res,'订单详情')
					if(res.code === 10000){
						this.recordList = res.data.list
						this.recordList.some(item => {
							if(item.id == this.id){
								this.orderDetail = item
								this.downloadFile(item.icon)
								this.orderDetail.exchangeTime = dayjs(this.orderDetail.exchangeTime).format("YYYY-MM-DD HH:mm:ss")
							}
						})
					}
				})
			},
			// 下载文件
			downloadFile(icon) {
				this.$http.post('common/file/download', {
					id: icon
				}).then(res => {
					console.log(res, '下载文件')
					if (res.code === 10000) {
						// this.tempPath = res.data.data.fileName
						// this.pictureList.push(res.data.data.fileData)
						this.img = res.data.fileData
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
	}
	.order-container {
		background-color: #fff;
		.item {
			width: 750rpx;
			height: 64rpx;
			display: flex;
			padding: 20rpx;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #F5F5F5;
			.left {
				font-size: 28rpx;
				color: #888;
			}
			.right {
				color: #555;
				font-size: 28rpx;
			}
			.wrong {
				color: #FB6A6A;
			}
			.correct {
				color: #23B055;
			}
		}
		.img {
			height: 90rpx;
			.right {
				width: 76rpx;
				height: 76rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>
